<template>
  <el-form ref="form" :model="enterprise" :rules="rules" label-width="180px">

    <el-form-item :label="$t('enterprise.entLogo')" prop="logo">
<!--        <el-input v-model="logoUrl" v-if="false"></el-input>-->
        <el-upload
          class="logo-uploader"
          ref="upload"
          :show-file-list="false"
           action="/"
          :before-upload="beforeUpload"
          :on-change="onChange"
          :auto-upload="false">
        <div v-if="enterprise.logoUrl" class="logo-bg">
          <el-image  fit="contain" :src="enterprise.logoUrl" class="el-upload-avatar"></el-image>
        </div>
    <div v-else class="el-upload-content">
      <div class="logo-wrap">
        <i  class="el-icon-plus avatar-uploader-icon font35" ></i>
        <div class="el-upload__text">LOGO上传</div>
      </div>
    </div>
          <div class="el-upload__tip" slot="tip">{{$t('enterprise.logoTip')}}</div>
        </el-upload>
    </el-form-item>
    <el-form-item :label="$t('enterprise.entAddress')" prop="name" size="small">
      <el-input v-model="enterprise.tenantName" :placeholder="$t('public.placeholder',{placeholder:$t('enterprise.entAddress')})" maxlength="30" />
    </el-form-item>
    <el-form-item :label="$t('enterprise.entDesc')" prop="desc">
      <el-input v-model="enterprise.remark" :placeholder="$t('public.placeholder',{placeholder:$t('enterprise.entDesc')})" maxlength="30"  size="small"/>
    </el-form-item>
    <el-form-item :label="$t('enterprise.entContact')" prop="nickName">
      <el-input v-model="enterprise.leader" :placeholder="$t('public.placeholder',{placeholder:$t('enterprise.entContact')})" maxlength="30"  size="small"/>
    </el-form-item>
    <el-form-item :label="$t('enterprise.entTel')" prop="phonenumber">
      <el-input v-model="enterprise.phonenumber" :placeholder="$t('public.placeholder',{placeholder:$t('enterprise.entTel')})" maxlength="11"  size="small"/>
    </el-form-item>
    <el-form-item :label="$t('enterprise.entEmail')" prop="email">
      <el-input v-model="enterprise.email" :placeholder="$t('public.placeholder',{placeholder:$t('enterprise.entEmail')})" maxlength="50"  size="small"/>
    </el-form-item>
    <el-form-item :label="$t('enterprise.entAddress')" prop="address">
      <el-input v-model="enterprise.address" :placeholder="$t('public.placeholder',{placeholder:$t('enterprise.entAddress')})" maxlength="50"  size="small"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit" icon="el-icon-check">{{$t('public.submit')}}</el-button>
      <el-button type="info" plain size="mini" @click="close" icon="el-icon-close">{{$t('public.cancel')}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateMyTenantProfile,uploadTenantAvatar } from "@/api/system/enterprise";

export default {
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      enterprise:{
        logoUrl:'',
        tenantName:'' , //企业名称
        leader:'',  //企业联系人
        phonenumber:'', //企业电话
        email:'',  //企业邮箱
        address:'', //企业地址
        remark:''  //企业宣传
      },
      // 表单校验
      rules: {
        tenantName:[
          { required: true, message: "企业名称不能为空", trigger: "blur" }
        ],
        remark:[
          { required: true, message: "企业宣传不能为空", trigger: "blur" }
        ],
        email: [
          { required: false, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: false, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch:{
    data:{
      handler(newVal){
        if(newVal){
            this.enterprise = {...newVal}
        }
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      const {enterprise} = this
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateMyTenantProfile(enterprise).then(response => {
            if(response.code == 200){
              this.$store.commit('app/SET_LOGO',enterprise.logoUrl)
              this.$emit('update',enterprise)
              this.$modal.msgSuccess("修改成功");
            }
          });
        }
      });
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
    close() {
      this.$tab.closePage();
    },
    onChange(res){
      console.log(res)
      let formData = new FormData();
      formData.append("avatarfile", res.raw);
      uploadTenantAvatar(formData).then(response => {
        if(response.code == 200){
          this.enterprise.logoUrl = response.data.url;
        }
      });
    },
    onSuccess(res){
      console.log(res)
    },
    onError(res){
      console.log(res)
    },
  }
};
</script>
<style lang="scss" scoped>


::v-deep .logo-uploader{
  color: #9FA9B5;
}
::v-deep .el-upload-content{
  border:1px dashed #D9DFE6;
  width:150px;
  height:110px;
  padding:10px
}
.el-upload-avatar{
  height:120px;
}
.el-upload__tip{
  color: #a1a5ae;
}
.el-upload__text{
line-height: 1em;
}
.logo-wrap{
  padding:12px 0;
  height: 100%;
  background-color: #EDF2FA;
}
.logo-bg{
  display: flex;
  justify-content: center;
  align-items: center;
  width:190px;
  padding:10px;
  background-color: #{'var(--current-head-theme)'};
}
</style>

